<template>
  <!--类似html标签-->

  <el-card class="box-card">
    <!-- 搜索与添加 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.categoryName">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="findAll()"
          ></el-button>
        </el-input>
      </el-col>

      <el-col :span="4">
        <el-button
          type="primary"
          @click="
            addDialogVisible = true
            addCategory = {}
          "
          >添加</el-button
        >
      </el-col>
    </el-row>

    <!--表格组件-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="categoryId"
        label="类别ID"
        style="width: 30%"
      ></el-table-column>
      <el-table-column
        prop="categoryName"
        label="类别名称"
        style="width: 35%"
      ></el-table-column>

      <el-table-column label="操作" style="width: 35%">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editButton(scope.row)"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteById(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <!---弹出框组件 :visible.sync 控制对话框是否 显示/隐藏-->
    <el-dialog title="添加或修改" :visible.sync="addDialogVisible" width="30%" :before-close="cancel">
      <el-form label-width="70px">
        <el-form-item label="类别名称" prop="text">
          <el-input v-model="addCategory.categoryName"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>


<script>
export default {
  data() {
    return {
      //定义变量        （类似java创建  int aa,String b,List aaa）

      //创建了一个tableData的集合比变量
      tableData: [],
      queryInfo: {
        page: 1,
        pageSize: 5,
      },
      total: 0,
      addDialogVisible: false, //控制对话框显示与隐藏
      addCategory: {},
    }
  },
  created() {
    // 页面运行第一加载，就会立马执行这个里面的  代码
    this.findAll()
  },
  methods: {
    // 取消
    cancel() {
      this.addCategory = {}
      this.addDialogVisible  = false
    },

    // 编辑按钮
    async editButton(row) {
      this.addDialogVisible = true
      // 根据ID获取数据
      const {data: res} = await this.$http.get(`/category/findById/${row.categoryId}`)
      this.addCategory = res
    },

    // 每页显示多少条数据回调
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      // 回到第一页
      this.queryInfo.page = 1
      this.findAll()
    },
    // 当前页发生改变的回调
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.findAll()
    },
    //定义增、删、改、查的方法    （可以也多个方法，多个方法用 ，逗号隔开）

    //后台查询所有数据的方法
    async findAll() {
      const { data: res } = await this.$http.post(
        '/category/findAll',
        this.queryInfo
      )
      //   alert(JSON.stringify(res))
      this.tableData = res.dataList // 刷新数据库
      this.total = res.count
      console.log(res)
    },

    async deleteById(currentRow) {
      //提示消息 标题文本 提示信息
      const confirmResult = await this.$confirm(
        '此操作将永久删除该分类, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch(
        (
          error //只有一个return 只有一个参数 可以省略return {} ()
        ) => error //返回给confirmResult接收
      )
      //确认是confirm 取消就会报错-使用捕获错误
      //取消为cancel字段
      //console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      // alert('正在请求后台删除数据库数据'+JSON.stringify(currentRow))
      const { data: res } = await this.$http.get(
        '/category/delete/' + currentRow.categoryId,
        {}
      )
      // alert(JSON.stringify(res))  //请求后台删除接口
      if (res.code == '200') {
        this.$message.success(res.message)
      }
      this.findAll() // 刷新
    },

    async save() {
      if (this.addCategory.categoryId == undefined) {
        // alert("保存操作")
        const { data: res } = await this.$http.post(
          '/category/insert/',
          this.addCategory
        )
        // 后台接口
        this.$message.success('添加成功')
        this.addDialogVisible = false // 隐藏对话框
        this.findAll()
      } else {
        const { data: res } = await this.$http.post(
          '/category/update/',
          this.addCategory
        )
        // 后台接口
        this.$message.success('修改成功')
        this.addDialogVisible = false // 隐藏对话框
        this.findAll()
      }
    },
  },
}
</script>